import React, { useEffect } from 'react';
import useStore from '../../../context/useStore'
import { Table, Space, Input, Select, Button, Modal } from 'antd';

import { useObserver } from 'mobx-react-lite';
const { confirm } = Modal;
const { Option } = Select;

function handleChange(value: any) {
    console.log(`selected ${value}`);
}
const StudentManager: React.FC = () => {
    let { manager } = useStore();
    useEffect(() => {
        manager.allocatedListAction();
        manager.getRoomListAction();
        manager.getAllRoomListAction();
    }, [manager])
    function delClassRoom(grade_id: string) {
        confirm({
          title: '确定要删除吗?',
          onOk() {
            // manager.delAllRoomListItemAction(grade_id);
          },
          onCancel() { },
          okText: "确定",
          cancelText: "取消"
        });
      }
    const columns = [
        {
          title: '姓名',
          dataIndex: 'student_name',
          key: 'student_id',
          render: (text: React.ReactNode) => <button>{text}</button>,
        },
        {
          title: '学号',
          dataIndex: 'student_id',
          key: 'xuehao',
        },
        {
          title: '班级',
          dataIndex: 'grade_name',
          key: 'grade_id',
        },
        {
          title: '教室',
          key: 'room_id',
          dataIndex: 'room_text'
        },
        {
            title: '密码',
            key: 'pwd',
            dataIndex: 'student_pwd'
          },
        {
          title: '操作',
          key: 'action',
          render: (record:any) => (
            <Space size="middle">
              <button onClick={() => { delClassRoom(record.student_id) }}>删除</button>
            </Space>
          ),
        },
      ];
    return useObserver(()=><div>
            <h2>学生管理</h2>
            <Input placeholder="输入学生姓名" style={{width:150}}/><Select placeholder='请选择教室号' style={{ width: 120 }} onChange={handleChange}>
                {manager.roomList.map((item:any,index)=>{
                    return <Option key={index} value={item.room_text}>{item.room_text}</Option>
                })}
            </Select>

                <Select placeholder='班级名' style={{ width: 120 }} onChange={handleChange}>
                    {
                        manager.allRoomList.map((item:any,index)=>{
                            return <Option key={index} value={item.grade_name}>{item.grade_name}</Option>
                        })
                    }
                </Select><Button type="primary">搜索</Button>
                <p><Button type="primary">重置</Button></p>
            <Table rowKey={columns[0].key}  columns={columns} dataSource={manager.allocatedListItem} />
        </div>
    );
}

export default StudentManager;


// ReactDOM.render(, mountNode);